<script setup lang="ts">
import { cursor } from 'sisteransi'
import { ref } from 'vue'
import wx from 'weixin-js-sdk'
import { useUserInfoState } from '~/composables/states'
import show = cursor.show

const inputValue = ref('')
const showGpPopup = ref(false)
const showXhPopup = ref(false)
const showQyPopup = ref(false)
const showGodSelectPopup = ref(false)

// 判断是否为微信浏览器
const isWeChat = () => /MicroMessenger/i.test(navigator.userAgent)

const countdown = ref(10)

const selectedXianghuo = ref<any>(null)

const submited = ref(false)

const timer = ref()

const userInfo = useUserInfoState()

const isPaying = ref(false)

const isWxConfigured = ref(false)

const qrCodeUrl = ref('')

const showQRCodeModal = ref(false)

const isMobile = ref(false)

const orderId = ref('')

const showPay = ref(false)

const selectedOfferings = ref()

const selectedOfferingsCount = ref(0)

const selectedGod = ref({ img: '', name: '' })

const isSubmit = ref(false)

const msg = ref<string>('')

function checkDevice() {
  const userAgent = navigator.userAgent.toLowerCase()
  // 常见的手机端的 userAgent 字符串判断
  const mobileKeywords = ['iphone', 'ipod', 'android', 'windows phone', 'blackberry', 'webos']

  isMobile.value = mobileKeywords.some(keyword => userAgent.includes(keyword))
}

// 供品列表
const offerings = ref<Array<any>>([])

// 神佛列表
const gods = ref<Array<any>>([])
const timer1 = ref()
const loading = ref(false)
const xianghuo = ref([
  { id: 1, name: '1根', img: '/assets/images/shangxiang/1.png', selected: true },
  { id: 2, name: '2根', img: '/assets/images/shangxiang/2.png', selected: false },
  { id: 3, name: '3根', img: '/assets/images/shangxiang/3.png', selected: false },
])

const gp = ref(false)

const xh = ref(false)

async function submitPayWx() {
  if (isPaying.value)
    return // 防止重复点击
  isPaying.value = true
  if (!orderId.value) {
    msg.value = '订单创建失败，请稍后再试'
    isSubmit.value = true
  }
  try {
    let method
    if (isMobile.value && isWeChat()) {
      method = 'mp'
    }
    else if (isMobile.value) {
      method = 'wap'
    }
    else {
      method = 'scan'
    }
    const oid = orderId.value
    const { data: res } = await useFetchPost('/api/Orders/payOrder', {
      oid,
      user_id: userInfo.value.id,
      returnurl: `${useRequestURL().href}?oid=${oid}`,
      type: 'wechat',
      method,
    })
    if (!res.value || !res.value.data) {
      msg.value = '未获取到订单信息或者订单已支付'
      isSubmit.value = true
      return
    }
    const info = res.value.data
    if (!isWxConfigured.value) {
      wx.config({
        debug: false, // 开启调试模式，调试时为true
        appId: info.appId, // 公众号的唯一标识
        timestamp: info.timeStamp, // 时间戳
        nonceStr: info.nonceStr, // 随机串
        signature: info.paySign, // 签名
        jsApiList: ['chooseWXPay'], // 需要调用的JS接口
      })
      isWxConfigured.value = true
    }

    if (isMobile.value && isWeChat()) {
      const wxReadyTimeout = setTimeout(() => {
        msg.value = '微信支付初始化失败，请刷新页面重试'
        isSubmit.value = true
        isPaying.value = false
      }, 5000)

      wx.ready(() => {
        clearTimeout(wxReadyTimeout) // 成功准备则清除
        // 调用支付接口
        wx.chooseWXPay({
          timestamp: info.timeStamp, // 支付签名时间戳
          nonceStr: info.nonceStr, // 支付签名随机串
          package: info.package, // 预支付交易会话ID
          signType: info.signType, // 签名方式，默认为'SHA1'，使用 MD5 签名时请注意
          paySign: info.paySign, // 支付签名
          success(res: any) {
            // 支付成功后的回调
            console.log('支付成功', res)
            // isSubmit.value = true
            submited.value = true
            showPay.value = false
            timer.value = setInterval(() => {
              if (countdown.value > 0) {
                countdown.value--
              }
              else {
                clearInterval(timer.value) // 倒计时结束，清除定时器
                countdown.value = 10
                submited.value = false
                msg.value = '上香成功，愿您心安事顺！'
                isSubmit.value = true
              }
            }, 1000)
          },
          fail(res: any) {
            // 支付失败的回调
            console.log('支付失败', res)
            msg.value = '支付失败'
            isSubmit.value = true
          },
          complete() {
            isPaying.value = false
          },
        })
      })

      wx.error((res: any) => {
        // 错误回调
        console.error('微信 SDK 错误:', res)
        msg.value = '微信支付初始化失败'
        isSubmit.value = true
        isPaying.value = false
      })
    }
    else if (isMobile.value) {
      window.location.href = info.targetUrl
    }
    else {
      // 非微信浏览器，显示二维码
      qrCodeUrl.value = info.qrCodeBase64
      showQRCodeModal.value = true
      timer1.value = setInterval(async () => {
        loading.value = true
        try {
          const { data: res } = await useFetchPost('/api/orders/getOrderInfo', {
            oid,
          })
          if (res.value.data.status == 1) {
            if (timer1.value) {
              clearInterval(timer1.value)
            }
            closeModal()
            submited.value = true
            timer.value = setInterval(() => {
              if (countdown.value > 0) {
                countdown.value--
              }
              else {
                clearInterval(timer.value) // 倒计时结束，清除定时器
                countdown.value = 10
                submited.value = false
                msg.value = '上香成功，愿您心安事顺！'
                isSubmit.value = true
              }
            }, 1000)
          }
        }
        catch (error) {
          console.error('Error fetching order info:', error)
        }
        finally {
          loading.value = false
        }
      }, 1000)
    }
  }
  catch (e) {
    console.error('支付异常:', e)
    msg.value = '支付请求失败，请稍后再试'
    isSubmit.value = true
  }
  finally {
    isPaying.value = false
  }
}

async function submitPayZfb() {
  if (isPaying.value)
    return
  isPaying.value = true

  try {
    let method
    if (isMobile.value && isWeChat()) {
      method = 'mp'
    }
    else if (isMobile.value) {
      method = 'wap'
    }
    else {
      method = 'web'
    }
    const oid = orderId.value
    const { data: res } = await useFetchPost('/api/Orders/payOrder', {
      oid,
      user_id: userInfo.value.id,
      returnurl: `${useRequestURL().href}?oid=${oid}`,
      type: 'alipay',
      method,
    })

    if (!res.value || !res.value.data || !res.value.data.targetUrl) {
      msg.value = '未获取到支付信息，请稍后再试'
      isSubmit.value = true
      return
    }

    // 插入 form 并执行
    const wrapper = document.createElement('div')
    wrapper.innerHTML = res.value.data.targetUrl
    document.body.appendChild(wrapper)

    // 有些浏览器安全策略会阻止 inline script 执行，需要手动触发
    const form = wrapper.querySelector('form') as HTMLFormElement | null
    if (form) {
      form.submit()
    }
    else {
      msg.value = '支付表单解析失败'
      isSubmit.value = true
    }
  }
  catch (err) {
    console.error('支付宝支付异常:', err)
    msg.value = '请求失败，请稍后再试'
    isSubmit.value = true
  }
  finally {
    isPaying.value = false
  }
}

function handleEdit(): void {
  showQyPopup.value = true
}

function addXianghuo(): void {
  // 重置选择状态
  offerings.value.forEach(offering => offering.selected = false)
  showXhPopup.value = true
}

function addGongpin(): void {
  // 重置选择状态
  offerings.value.forEach(offering => offering.selected = false)
  showGpPopup.value = true
}

async function submitHandle() {
  // 祈愿语
  // console.log('祈愿语', inputValue.value)
  // 供品
  // console.log('供品', selectedOfferings.value)
  // 香火
  // console.log('香火', selectedXianghuo.value)
  if (!selectedOfferings.value?.length || !selectedXianghuo.value || !inputValue.value) {
    if (!selectedOfferings.value?.length)
      msg.value = '请选择供品'
    else if (!selectedXianghuo.value)
      msg.value = '请选择香火'
    else if (!inputValue.value)
      msg.value = '请填写祈愿'
    isSubmit.value = true
    isPaying.value = false
    return
  }

  // 整合祈愿语，供品，香火以json形式传参
  const data = {
    gp: selectedOfferings.value,
    xh: selectedXianghuo.value,
    yuanwang: inputValue.value,
  }

  const { data: res } = await useFetchPost('/api/Shangxiang/shangxiang', {
    data,
    type: 2,
    user_id: userInfo.value.id,
  })
  orderId.value = res.value.data.oid
  showPay.value = true
}

onBeforeUnmount(() => {
  // 清理定时器
  if (timer.value) {
    clearInterval(timer.value)
  }
  if (timer1.value) {
    clearInterval(timer1.value)
  }
})

// 关闭弹窗
function closeModal() {
  showGpPopup.value = false
  showXhPopup.value = false
  showQyPopup.value = false
  showGodSelectPopup.value = false
  isSubmit.value = false
  showQRCodeModal.value = false
  isPaying.value = false
  showPay.value = false
}

// 选择供品
function selectOffering(offering: any) {
  offering.selected = !offering.selected
}

function selectXianghuo(xh: any) {
  // xh.selected = !xh.selected
  // //其他的改为false
  // xianghuo.value.forEach((item: any) => {
  //   if (item.id !== xh.id) {
  //     item.selected = false
  //   }
  // })
  xianghuo.value.forEach(s => s.selected = false)
  xh.selected = true
}

// 选择神佛
function selectGod(god: any) {
  gods.value.forEach(g => g.selected = false)
  god.selected = true
}

// 提交供品选择
function submitSelectionGp() {
  selectedOfferings.value = offerings.value.filter(offering => offering.selected)
  showGpPopup.value = false
  if (selectedOfferings.value.length > 0) {
    selectedOfferingsCount.value = selectedOfferings.value.length
    gp.value = true
  }
  if (selectedOfferings.value.length > 3) {
    msg.value = '供品最多只能选择3个'
    isSubmit.value = true
    gp.value = false
    selectedOfferings.value = []
  }
}

// 提交香火选择
function submitSelectionXh() {
  selectedXianghuo.value = xianghuo.value.find(xh => xh.selected)
  showXhPopup.value = false
  xh.value = true
}

// 确定选择神佛
function confirmGodSelection() {
  selectedGod.value = gods.value.find(god => god.selected)
  showGodSelectPopup.value = false
}

// 跳转到神仙详情页
function goToGodDetail() {
  // console.log('跳转到九天圣母老仙详情页')
  // router.push('/shangxiang/detail/jiutianshengmu')
  showGodSelectPopup.value = true
}

async function gongpinList() {
  const { data: gongpinList } = await useFetchGet('/api/Shangxiang/getgongpinlist')
  offerings.value = gongpinList.value.data.rows
}

async function gongxiangList() {
  const { data: gongxiangList } = await useFetchGet('/api/Shangxiang/getgongxianglist')
  gods.value = gongxiangList.value.data.rows
  selectedGod.value = gods.value[0]
}

const router = useRouter()

// const userInfo = useUserInfoState()
const route = useRoute()
onMounted(async () => {
  gongpinList()
  gongxiangList()
  checkDevice()
  if (route.query.oid) {
    const { data: res } = await useFetchPost('/api/orders/getOrderInfo', {
      oid: route.query.oid,
    })
    if (res.value.data.status == 1) {
      // showPopup.value = true
      // msg.value = '支付成功'
      // isSubmit.value = true

      submited.value = true
      timer.value = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--
        }
        else {
          clearInterval(timer.value) // 倒计时结束，清除定时器
          countdown.value = 10
          submited.value = false
          msg.value = '上香成功，愿您心安事顺！'
          isSubmit.value = true
        }
      }, 1000)
    }
  }
})
</script>

<template>
  <div class="min-h-screen w-full relative">
    <Header back="/select" />
    <!-- 自适应背景图 -->
    <img
      src="/assets/images/shangxiang/shangxiangye.png"
      alt=""
      class="h-auto w-full object-contain"
    >
    <div class="top-1/2 writing-vertical -translate-y-1/2 transform right-0 fixed z-50">
      <button
        class="text-white px-2 py-1 rounded-l-lg bg-black/60 transition hover:bg-gray-800"
        @click="router.push('orders')"
      >
        查看订单
      </button>
    </div>
    <div class="w-full top-[5%] absolute">
      <div class="mx-auto w-full left-0 right-0 relative">
        <div class="flex justify-center">
          <img
            src="/assets/images/shangxiang/qiyuan.png"
            alt=""
            class="w-[280px] object-contain md:w-[300px]"
          >
        </div>

        <div class="mx-auto flex items-center inset-0 left-0 right-0 justify-center absolute">
          <span class="text-2xl text-[#5a2212] font-bold md:text-3xl">
            {{ inputValue || '请输入祈愿' }}
          </span>
          <UButton
            icon="i-heroicons-pencil-square"
            size="xl"
            color="orange"
            square
            variant="link"
            @click="handleEdit"
          />
        </div>
      </div>

      <div class="left-4 top-30 absolute z-10">
        <div class="px-2 py-5 rounded-full bg-white flex flex-col w-10 cursor-pointer shadow-[0_0_15px_rgba(0,0,0,0.15),_8px_0_10px_-5px_rgba(0,0,0,0.1),_-8px_0_10px_-5px_rgba(0,0,0,0.1)] items-center justify-center" @click="goToGodDetail">
          <div class="writing-vertical text-2xl text-black font-bold mb-3 text-center">
            {{ selectedGod.name }}
          </div>
          <div class="border border-gray-200 rounded-full bg-gray-100 flex h-5 w-5 items-center justify-center">
            <UIcon name="i-heroicons-chevron-down" />
          </div>
        </div>
      </div>

      <div class="mx-auto mt-[10%] flex w-full left-0 right-0 justify-center relative md:mt-[20%]">
        <img
          :src="selectedGod.img"
          class="h-[400px] w-[300px] md:w-[450px]"
        >
      </div>

      <div class="mx-auto flex w-full left-0 right-0 justify-center relative -mt-[12%] md:-mt-[10%]">
        <img
          src="/assets/images/shangxiang/gongtai.png"
          alt=""
          class="w-[400px] md:w-[800px]"
        >
        <button v-if="!gp" class="opacity-90 w-[150px] cursor-pointer transition-opacity top-0 absolute z-1 hover:opacity-100 md:w-[300px]" @click="addGongpin()">
          <img
            src="/assets/images/shangxiang/gp-button.png"
            alt=""
          >
        </button>
        <div v-if="selectedOfferingsCount == 3" class="mb-6 gap-4 grid grid-cols-3 absolute -top-5">
          <div
            v-for="selectedOffering in selectedOfferings" :key="selectedOffering.id"
            class="p-2 rounded-lg flex flex-col cursor-pointer transition-all items-center"
          >
            <img :src="selectedOffering.img" class="mb-1 h-20 w-20 object-contain md:w-40">
          </div>
        </div>
        <div v-else-if="selectedOfferingsCount == 2" class="mb-6 gap-4 grid grid-cols-2 absolute -top-5">
          <div
            v-for="selectedOffering in selectedOfferings" :key="selectedOffering.id"
            class="p-2 rounded-lg flex flex-col cursor-pointer transition-all items-center"
          >
            <img :src="selectedOffering.img" class="mb-1 h-20 w-20 object-contain md:w-40">
          </div>
        </div>
        <div v-else-if="selectedOfferingsCount == 1" class="mb-6 gap-4 grid grid-cols-1 absolute -top-5">
          <div
            v-for="selectedOffering in selectedOfferings" :key="selectedOffering.id"
            class="p-2 rounded-lg flex flex-col cursor-pointer transition-all items-center"
          >
            <img :src="selectedOffering.img" class="mb-1 h-20 w-20 object-contain md:w-40">
          </div>
        </div>
      </div>

      <div class="mx-auto flex w-full left-0 right-0 justify-center relative -mt-[20%]">
        <img
          src="/assets/images/shangxiang/xianglu.png"
          alt=""
          class="w-[300px] md:w-[480px]"
        >
        <button v-if=" !xh" class="opacity-90 w-[150px] cursor-pointer transition-opacity absolute z-1 hover:opacity-100 md:w-[300px]" @click="addXianghuo()">
          <img
            src="/assets/images/shangxiang/xh-button.png"
            alt=""
          >
        </button>
        <div
          class="p-2 rounded-lg flex flex-col cursor-pointer transition-all items-center absolute z-1 -top-[45%] md:-top-[60%]"
        >
          <img v-if="selectedXianghuo" :src="selectedXianghuo.img" class="mb-1 w-[100px] md:w-[200px]">
        </div>
      </div>

      <div class="mx-auto flex w-full left-0 right-0 justify-center relative">
        <button v-if="gp && xh" class="opacity-90 w-[250px] cursor-pointer transition-opacity bottom-0 absolute z-10 hover:opacity-100 md:w-[400px]" @click="submitHandle()">
          <img
            src="/assets/images/shangxiang/sx-submit.png"
            alt=""
          >
        </button>
      </div>
    </div>

    <UModal
      v-model="showGpPopup"
      :ui="{
        width: 'w-9/10',
        container: 'flex items-center justify-center min-h-screen px-4',
        overlay: { background: 'bg-black/80' },
        base: 'relative',
      }"
    >
      <UCard class="relative">
        <!-- 关闭按钮 -->
        <button
          class="text-#93806b transition-colors right-3 top-3 absolute hover:text-#785a40"
          @click="closeModal"
        >
          <UIcon name="i-heroicons-x-mark" class="text-xl" />
        </button>

        <template #header>
          <div class="text-#93806b text-center">
            <h2 class="text-2xl font-bold">
              添加供品
            </h2>
            <!-- <p class="text-sm mt-1">每种供品需要1功缘点</p> -->
          </div>
        </template>

        <!-- 水果元素选择区 -->
        <div class="mb-6 gap-4 grid grid-cols-3">
          <div
            v-for="offering in offerings"
            :key="offering.id"
            class="p-2 rounded-lg flex flex-col cursor-pointer transition-all items-center"
            :class="{ 'bg-amber-100': offering.selected }"
            @click="selectOffering(offering)"
          >
            <img :src="offering.img" class="mb-1 h-16 w-16 object-contain">
            <span class="text-#93806b text-center">{{ offering.name }}</span>
            <span class="text-#93806b text-center">¥ {{ offering.price }}</span>
          </div>
        </div>

        <template #footer>
          <div class="flex justify-center">
            <button class="flex items-center justify-center" @click="submitSelectionGp">
              <img src="/assets/images/shangxiang/gp-submit.png" alt="" class="h-15">
            </button>
          </div>
        </template>
      </UCard>
    </UModal>
    <!-- 香火弹窗组件 -->
    <UModal
      v-model="showXhPopup"
      :ui="{
        width: 'w-9/10',
        container: 'flex items-center justify-center min-h-screen px-4',
        overlay: { background: 'bg-black/80' },
        base: 'relative',
      }"
    >
      <UCard class="relative">
        <!-- 关闭按钮 -->
        <button
          class="text-#93806b transition-colors right-3 top-3 absolute hover:text-#785a40"
          @click="closeModal"
        >
          <UIcon name="i-heroicons-x-mark" class="text-xl" />
        </button>

        <template #header>
          <div class="text-#93806b text-center">
            <h2 class="text-2xl font-bold">
              添加香火
            </h2>
            <!-- <p class="text-sm mt-1">每根香火需要1功缘点</p> -->
          </div>
        </template>

        <!-- 香火选择区 -->
        <div class="mb-5 gap-4 grid grid-cols-3">
          <div
            v-for="x in xianghuo"
            :key="x.id"
            class="p-2 rounded-lg flex flex-col cursor-pointer transition-all items-center"
            :class="{ 'bg-amber-100': x.selected }"
            @click="selectXianghuo(x)"
          >
            <img :src="x.img" class="mb-1 h-16 w-16 object-contain">
            <span class="text-#93806b text-center">{{ x.name }}</span>
          </div>
        </div>

        <template #footer>
          <div class="flex justify-center">
            <button class="flex items-center justify-center" @click="submitSelectionXh">
              <img src="/assets/images/shangxiang/xh-submit.png" alt="" class="h-15">
            </button>
          </div>
        </template>
      </UCard>
    </UModal>
    <UModal
      v-model="showGodSelectPopup"
      :ui="{
        width: 'w-9/10',
        container: 'flex items-center justify-center min-h-screen px-4',
        overlay: { background: 'bg-black/80' },
        base: 'relative',
      }"
    >
      <UCard class="relative">
        <!-- 关闭按钮 -->
        <button
          class="text-#93806b transition-colors right-3 top-3 absolute hover:text-#785a40"
          @click="closeModal"
        >
          <UIcon name="i-heroicons-x-mark" class="text-xl" />
        </button>

        <template #header>
          <div class="text-#93806b text-center">
            <h2 class="text-2xl font-bold">
              选择神佛
            </h2>
          </div>
        </template>

        <!-- 神佛选择区 -->
        <div class="mb-5 gap-4 grid grid-cols-3">
          <div
            v-for="god in gods"
            :key="god.id"
            class="group flex flex-col items-center"
            @click="selectGod(god)"
          >
            <div class="h-28 w-24 relative">
              <!-- 增加容器尺寸和内边距 -->
              <!-- 边框图片 -->
              <img
                v-if="god.selected"
                src="/assets/images/shangxiang/border.png"
                class="h-full w-full inset-0 absolute animate-[zoomIn_0.3s_ease-in-out] object-contain"
              >
              <!-- <img
                src="/assets/images/shangxiang/name.png"
              /> -->
              <!-- 神像图片（调整尺寸和定位） -->
              <div class="mx-auto flex h-full w-[70%] items-end left-0 right-0 justify-center relative">
                <img
                  :src="god.img"
                  class="h-full w-full transition-all duration-200 object-contain group-hover:scale-105"
                >
              </div>
              <!-- 名称底框（底部层） -->
              <img
                src="/assets/images/shangxiang/name.png"
                class="left-1/2 -translate-x-1/2 w-20 absolute object-contain -bottom-3"
              >
              <!-- 名称文字 -->
              <span class="left-1/2 -translate-x-1/2 text-sm text-#c46d37 font-bold text-center w-full absolute -bottom-3">
                {{ god.name }}
              </span>
            </div>
          </div>
        </div>

        <template #footer>
          <div class="flex justify-center">
            <button class="flex items-center justify-center" @click="confirmGodSelection">
              <img src="/assets/images/shangxiang/sf-submit.png" alt="" class="h-15">
            </button>
          </div>
        </template>
      </UCard>
    </UModal>
    <!-- 选择神佛弹窗 -->
    <div
      v-show="false"
      class="opacity-0 flex delay-[100ms] items-center inset-0 justify-center fixed z-2 animate-fade-in-up"
    >
      <div class="bg-black bg-opacity-50 inset-0 fixed" @click="closeModal" />
      <div class="max-w-md w-[95%] relative">
        <img
          src="/assets/images/shangxiang/shenfo.png"
          alt=""
          class="h-auto w-full object-contain"
        >

        <div class="flex flex-col gap-5 w-full top-0 justify-end absolute md:gap-12">
          <div class="flex items-center justify-end relative">
            <button
              class="text-white transition-colors z-3 hover:text-gray-200"
              @click="closeModal"
            >
              <UIcon name="i-heroicons-x-mark" class="text-2xl" />
            </button>
          </div>

          <div class="mx-auto pt-[3%] flex w-[80%] items-center left-0 right-0 justify-center relative">
            <div class="gap-x-2 grid grid-cols-3 w-[80%]">
              <div
                v-for="god in gods"
                :key="god.id"
                class="group flex flex-col items-center"
                @click="selectGod(god)"
              >
                <div class="h-28 w-24 relative">
                  <img
                    v-if="god.selected"
                    src="/assets/images/shangxiang/border.png"
                    class="h-full w-full inset-0 absolute animate-[zoomIn_0.3s_ease-in-out] object-contain"
                  >
                  <div class="mx-auto flex h-full w-[70%] items-end left-0 right-0 justify-center relative">
                    <img
                      :src="god.img"
                      class="h-[80%] w-[80%] transition-all duration-200 object-contain group-hover:scale-105"
                    >
                  </div>
                  <img
                    src="/assets/images/shangxiang/name.png"
                    class="left-1/2 -translate-x-1/2 w-20 absolute object-contain -bottom-3"
                  >
                  <span class="left-1/2 -translate-x-1/2 text-sm text-#c46d37 font-bold text-center w-full absolute -bottom-3">
                    {{ god.name }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="mx-auto flex w-[80%] items-center bottom-0 left-0 right-0 justify-center relative">
            <button class="flex items-center justify-center" @click="confirmGodSelection">
              <img src="/assets/images/shangxiang/sf-submit.png" alt="" class="h-12">
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 祈语弹窗 -->
    <UModal
      v-model="showQyPopup"
      :ui="{
        width: 'w-9/10',
        container: 'flex items-center justify-center min-h-screen px-4',
        overlay: { background: 'bg-black/80' },
        base: 'relative',
      }"
    >
      <UCard class="relative">
        <!-- 关闭按钮 -->
        <button
          class="text-#93806b transition-colors right-3 top-3 absolute hover:text-#785a40"
          @click="closeModal"
        >
          <UIcon name="i-heroicons-x-mark" class="text-xl" />
        </button>

        <template #header>
          <div class="text-#93806b text-center">
            <h2 class="text-2xl font-bold">
              修改祈愿
            </h2>
          </div>
        </template>

        <!-- 祈语输入区 -->
        <div>
          <UInput v-model="inputValue" color="amber" />
        </div>

        <template #footer>
          <div class="flex justify-center">
            <button class="flex items-center justify-center" @click="closeModal">
              <img src="/assets/images/shangxiang/qy-submit.png" alt="" class="h-15">
            </button>
          </div>
        </template>
      </UCard>
    </UModal>
    <div
      v-if="showPay"
      class="mx-auto opacity-0 flex w-full delay-[100ms] items-center inset-0 left-0 right-0 justify-center fixed z-2 animate-fade-in-up md:w-1/2"
    >
      <div class="mx-auto bg-black bg-opacity-50 w-full inset-0 left-0 right-0 fixed md:w-[90%]" @click="closeModal" />
      <div class="mx-auto w-[80%] left-0 right-0 relative">
        <img
          src="/assets/images/fengshui/border-pay.png"
          alt=""
          class="w-full object-contain"
        >
        <!-- 蒙版层 -->
        <!-- 中间内容叠加展示 -->
        <div class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/3 w-[90%] absolute">
          <div class="flex flex-col gap-3 items-center">
            <div class="p-4 pb-3 border-b border-gray-500 flex items-center justify-between" @click="submitPayWx">
              <div class="w-[30%]">
                <img
                  src="/assets/images/wx-icon.png"
                  alt=""
                  class="h-auto w-full object-contain"
                >
              </div>
              <div class="w-[30%]">
                <img
                  src="/assets/images/wx-bt.png"
                  class="h-auto w-full object-contain"
                >
              </div>
            </div>
            <div v-if="!isWeChat()" class="p-4 flex items-center justify-between" @click="submitPayZfb">
              <div class="w-[30%]">
                <img
                  src="/assets/images/zfb-icon.png"
                  class="h-auto w-full object-contain"
                >
              </div>
              <div class="w-[30%]">
                <img
                  src="/assets/images/zfb-bt.png"
                  class="h-auto w-full object-contain"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <TipModal
      v-model="isSubmit"
      title="提示"
      :message="msg"
      @close="closeModal"
    />
    <TipModal
      v-model="showQRCodeModal"
      title="提示"
      message="请打开微信扫码支付"
      :image="qrCodeUrl"
      @close="closeModal"
    />
    <UModal v-model="submited" prevent-close>
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="text-#93806b font-bold text-center">
            开始上香中...
          </div>
        </template>

        <div class="flex h-full items-center justify-around">
          <div class="text-#93806b font-bold text-center">
            {{ countdown }}秒
          </div>
          <img
            src="/assets/images/shangxiang/avatar.png"
            alt=""
            class="animate-rotate-cw h-[100px] w-[100px]"
          >
        </div>
      </UCard>
    </UModal>
  </div>
</template>

<style scoped>
.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.animate-rotate-cw {
  animation: rotate-cw 10s linear infinite;
  transform-origin: center;
}
@keyframes rotate-cw {
  from {
    transform: rotate(0deg); /* 同时保持平移 */
  }
  to {
    transform: rotate(360deg);
  }
}

/* 自定义淡入上升动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 注册Tailwind动画 */
.animate-fade-in-up {
  animation: fadeInUp 0.1s ease-out forwards;
}

/* 定义延迟类 */
.delay-\[100ms\] {
  animation-delay: 100ms;
}
</style>
